<template>
  <div>
      <div class="head">
         <div class="left">
            <img src="@/assets/img/logo2.png" alt="">
         </div>
         <ul class="right">
            <li><router-link to="/index">首页</router-link></li>
            <li><router-link to="/home/teachr">师资介绍</router-link></li>
            <li><router-link to="/home/course">课程介绍</router-link></li>
            <li><router-link to="/home/student">学生作品</router-link></li>
            <li><router-link to="/home/public">公共教程</router-link></li>
            <li><router-link to="/home/join">外包合作</router-link></li>
            <li><router-link to="/home/environment">教学环境</router-link></li>
         </ul>
      </div>
      <router-view/>
      <div class="bottom">
         <div class="login">
            <img src="@/assets/img/logo.png" alt="">
         </div>
         <div class="hellp">
            <img src="@/assets/img/2_03.jpg" alt="">
            <img src="@/assets/img/2_05.jpg" alt="">
            <img src="@/assets/img/2_07.jpg" alt="">
         </div>
         <p>请问您需要什么帮助？</p>
         <div class="operate">
            <div class="operate-one">
               <div><span></span><a href="#/home/teachr">查看我们的作品</a></div>
               <div><span></span><a href="#/home/relation">联系我们</a></div>
            </div>
            <div class="operate-one">
               <div><span></span><a href="#/home/course">查看我们的课程</a></div>
               <div><span></span><a href="#/home/public">加入我们</a></div>
            </div>
         </div>
      </div>
  </div>
</template>

<script setup>
// import { ref, getCurrentInstance } from 'vue'
// const { proxy } = getCurrentInstance()
// const img = ref(null)
// proxy.$http.get('https://yami.h5.yscase.com/yanjia/teacher/list').then(val => {
//    console.log(val.data)
//    img.value = val.data.data[0].t_famousurl
//    console.log(img.value)
// })
</script>

<style lang="less" scoped>
.head .right li .router-link-exact-active {
   border: 1px solid #353535;
}
   * {
      padding: 0;
      margin: 0;
   }
   .head {
      line-height: 65px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 150px 0 190px;
      .left {
         width: 233px;
         height: 56px;
         img {
            width: 100%;
            height: 100%;
         }
      }
      .right {
         display: flex;
         list-style: none;
         li {
            box-sizing: border-box;
            margin-right: 50px;
            a {
               padding: 6px 22px;
               font-size: 16px;
               color: #000;
               text-decoration: none;
               border-radius: 15px;
               border: 1px solid transparent;
            }
         }
         li:hover a {
            border: 1px solid #353535;
         }
      }
   }
   .bottom {
      width: 100%;
      background-color: #202022;
      overflow: hidden;
      .login {
         width: 318px;
         height: 81px;
         margin: 35px auto 30px;
         img {
            width: 100%;
            height: 100%;
         }
      }
      .hellp {
         display: flex;
         justify-content: center;
         margin-bottom: 36px;
         img {
            width: 58px;
            height: 58px;
            &:nth-child(2) {
               margin: 0 22px;
            }
         }
      }
      >p {
         font-size: 21px;
         color: #a6a6a6;
         // line-height: 21px;
         padding-bottom: 15px;
      }
      .operate {
         width: 378px;
         margin: 0 auto 83px;
         padding-top: 18px;
         border-top: 1px solid #bababa;
         .operate-one {
            display: flex;
            width: 290px;
            justify-content: center;
            margin: auto;
            &:nth-child(1) {
               margin-bottom: 14px;
            }
            div {
               font-size: 16px;
               color: #a6a6a6;
               display: flex;
               align-items: center;
               a {
                  font-size: 16px;
                  color: #a6a6a6;
                  text-decoration: none;
               }
               a:hover {
                  color: #c4b282;
                  text-decoration: underline;
               }
               span {
                  width: 9px;
                  height: 11px;
                  background: url('@/assets/img/arrows2.jpg') no-repeat;
                  margin-right: 19px;
               }
               &:nth-child(1) {
                  margin-right: 58px;
               }
            }
         }
      }
   }
</style>
